<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="GB18030">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>更多商品</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/theme.css">
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="script/docs.min.js"></script>
    <script src="script/back-to-top.js"></script>
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding: 5px;
            border: 1px #f60 solid;
        }

        #typeList :not(:first-child) {
            margin-top: 20px;
        }

        .label-text {
            margin: 0 10px;
        }

        .panel {
            border-radius: 0;
        }

        h3.break {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h3.break > a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="getAllTypeGoods" style="font-size:32px;">白给店铺首页</a>
                    <button type="button" class="navbar-toggle collapsed"
                            data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                            aria-controls="navbar">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> ${userInfo.username}<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <c:choose>
                                    <c:when test="${not empty userInfo}">
                                        <li><a href="toUserIndex"><i class="glyphicon glyphicon-scale"></i>用户首页</a></li>
                                    </c:when>
                                    <c:otherwise>
                                        <li><a href="user-login.jsp"><i class="glyphicon glyphicon-scale"></i>去登录</a></li>
                                    </c:otherwise>
                                </c:choose>
                                <li><a href="userLogout"><i class="glyphicon glyphicon-off"></i> 退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel panel-default">
                    <div class="panel-footer" style="height:50px;padding:0;">
                        <div style="float:left;padding:15px;">
                            类别：<span style="color: red">${type.tname}</span>
                            ----共<span style="color: red">${amount}</span>间商品
                        </div>
                        <div style="float:right;">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="请输入搜索内容">
                                </div>
                                <a href="#" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
                                    搜索
                                </a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="mBd" style="padding-top: 10px;">
            <div class="row">
                <c:choose>
                    <c:when test="${empty goodsListWithType}">&nbsp;&nbsp; &nbsp;没有任何商品信息</c:when>
                    <c:otherwise>
                        <c:forEach var="goods" items="${goodsListWithType }">
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <img alt="300x200" src="${goods.picture}"/>
                                    <div class="caption">
                                        <h3 class="break">
                                            <a href="#">${goods.gname}</a>
                                        </h3>
                                        <p>
                                        <div style="float: left;">
                                            <i class="glyphicon glyphicon glyphicon-yen"
                                               title="价格"></i>
                                            <span>价格${goods.price}￥</span>
                                        </div>
                                        <div style="float:right;">
                                            <i class="glyphicon glyphicon glyphicon-folder-close"
                                               title="库存"></i>
                                            <span>库存${goods.storenum}</span>
                                        </div>
                                        <button buy="${goods.gid}"
                                                class="btn btn-danger btn-default btn-block"
                                                data-toggle="modal" data-target="#buyModal">立即购买
                                        </button>
                                        <br>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>


    <div class="modal fade" id="buyModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myAddLabel" align="center" style="color: red">确定所购商品信息</h4>
                </div>
                <div class="modal-body">
                    <form action="buyGoods" method="post">
                        <div class="input-group">
                            <span class="input-group-addon">商品名称</span>
                            <input disabled="disabled" type="text" class="form-control" name="gname">
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon">商品单价</span>
                            <input disabled="disabled" type="text" class="form-control" name="price">
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon">需够数量</span>
                            <input type="text" class="form-control" name="number">
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon">商品类型</span>
                            <input disabled="disabled" type="text" class="form-control" name="tname">
                        </div>

                        <div class="input-group">
                            <button type="submit" class="btn btn-danger" data-dismiss="modal">购买</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column" style="text-align:center">
                <ul class="pagination">
                    <li>
                        <a rel="nofollow" href="#">上一页</a>
                    </li>
                    <li>
                        <a rel="nofollow" href="#">1</a>
                    </li>
                    <li>
                        <a rel="nofollow" href="#">2</a>
                    </li>
                    <li>
                        <a rel="nofollow" href="#">3</a>
                    </li>
                    <li>
                        <a rel="nofollow" href="#">4</a>
                    </li>
                    <li>
                        <a rel="nofollow" href="#">5</a>
                    </li>
                    <li>
                        <a rel="nofollow" href="#">下一页</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="container" style="margin-top:20px;">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="#">关于我们</a> | <a rel="nofollow" href="#">服务条款</a> | <a rel="nofollow"
                                                                                                       href="#">免责声明</a>
                        | <a rel="nofollow" href="#">网站地图</a> | <a rel="nofollow" href="#">联系我们</a>
                    </div>
                    <div class="copyRight">
                        xxxxxxxxxxxxxxxxxxx
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<script>
    $(function () {
        $("button[buy]").click(function () {
            console.log('aaaaaaaaaavvaa')
            var id = $(this).attr('buy')
            console.log(id);
            $.post("queryGoodsById2", {
                id: id
            }, function (data) {
                console.log(data);
                $("#buyModal input[name='gname']").val(data.gname);
                $("#buyModal input[name='price']").val(data.price);
                $("#buyModal input[name='tname']").val(data.tname);
            }, "json");
            //var path = "update?gid=" + id;
            //$("#update").attr("action", path);
        })
    })
</script>
</body>
</html>
